<template>
  <div class="setting-spare-part" v-loading="loading">
    <!-- start 头部 -->
    <div class="setting-spare-part-header">
      <div class="setting-part-left">
        <p class="setting-back-btn" @click="back">
          <i class="iconfont icon-arrow-left"></i> {{$t('common.base.back')}}
        </p>
        <p class="setting-back-name">{{cardConfig.inventoryType == 'sparePartInventory' ? cardData.name : $t('common.form.preview.serviceItem.title2')}}</p>
      </div>    
      <base-button
        type="primary"
        native-type="submit"
        :disabled="pending"
        @event="onSubmit"
      >{{$t('common.base.save')}}</base-button>
    </div>
    <!-- end 头部 -->
    
    <!-- start content-->
    <div class="setting-spare-part-content">
      <div class="setting-spare-li">
        <div class="setting-spare-title">
          <span>{{$t('task.setting.taskAdditionalSetting.listShowFields')}}      
            <el-tooltip :content="$t('task.tip.spareServiceTip2')" placement="top" popper-class="card-tips-tooltip" v-if="cardConfig.inventoryType == 'sparePartInventory'">
              <i class="iconfont icon-question"></i>
            </el-tooltip>
            <el-tooltip :content="$t('task.tip.spareServiceTip3')" placement="top" popper-class="card-tips-tooltip" v-else>
              <i class="iconfont icon-question"></i>
            </el-tooltip>
          </span>
          <span class="edit-column" @click="onEditColumn">{{$t('common.base.edit')}}</span>
        </div>
        <p class="setting-spare-column">
          <span v-for="field in fields" :key="field.fieldId">{{field.displayName}}</span>
        </p>
      </div>
      <div class="setting-spare-li">
        <div class="setting-spare-title">
          <span>{{$t('task.tip.spareServiceTip4')}}</span>
          <el-switch v-model="cardConfig.isInitAdd" class="setting-spare-switch"></el-switch>    
          <span class="preview" @click="onPreview">{{$t('common.base.preview')}}</span>
        </div>
        <p class="setting-spare-msg">{{$t('task.tip.spareServiceTip5', {name: cardData.name})}}</p>
      </div>
      <template v-if="cardConfig.inventoryType == 'sparePartInventory'">
        <div class="setting-spare-li">
          <div class="setting-spare-title">
            <span>{{$t('task.tip.spareServiceTip6')}} 
              <el-tooltip placement="top" popper-class="card-tips-tooltip" >
                <div slot="content">
                  <template>
                    <div class="card-displaymode--item">{{$t('task.tip.spareServiceTip7')}}</div>
                    <div class="card-displaymode--item">{{$t('task.tip.spareServiceTip8')}}</div>
                    <div class="card-displaymode--item">{{$t('task.tip.spareServiceTip9')}}</div>
                  </template>
                </div>
                <i class="iconfont icon-question"></i>
              </el-tooltip>
            </span>
          </div>
          <el-radio-group v-model="cardConfig.isOperateSpareRangeAllIn">
            <el-radio :label="0">{{$t('task.tip.spareServiceTip10')}}</el-radio>
            <el-radio :label="1">{{$t('task.tip.spareServiceTip11')}}</el-radio>
          </el-radio-group>
        </div>
        <div class="setting-spare-li">
          <div class="setting-spare-title">
            <span>{{$t('task.tip.materialApplyTip20')}}</span>
            <el-switch v-model="cardConfig.sparePartReturn" class="setting-spare-switch"></el-switch>    
          </div>
          <p class="setting-spare-msg"> 
            <i18n path="task.tip.materialApplyTip21">
              <el-select place="role" v-model="cardConfig.sparePartReturnRoleList" multiple :placeholder="$t('common.placeholder.select')">
                <el-option :label="$t('task.taskTypes.allot.taskExecutor')" value="taskPrincipalPerson"></el-option>
                <el-option :label="$t('task.taskTypes.allot.taskSynergies')" value="taskSynergyPerson"></el-option>
              </el-select>
            </i18n> 
          </p>
        </div>
        <div class="setting-spare-li">
          <div class="setting-spare-title">
            <span>{{$t('task.tip.materialApplyTip7')}}</span>
            <el-switch v-model="cardConfig.isTaskOutRep" class="setting-spare-switch"></el-switch>    
          </div>
          <p class="setting-spare-msg"> 
            <i18n path="task.tip.spareServiceTip12">
              <el-select place="role" v-model="cardConfig.roleList" multiple :placeholder="$t('common.placeholder.select')">
                <el-option :label="$t('task.taskTypes.allot.taskExecutor')" value="taskPrincipalPerson"></el-option>
                <el-option :label="$t('task.taskTypes.allot.taskSynergies')" value="taskSynergyPerson"></el-option>
              </el-select>
            </i18n> 
          </p>
          <div class="spare-parts" v-if="cardConfig.isTaskOutRep && cardData.personalRepertory">
            <div class="setting-spare-title">
              <span>{{$t('task.tip.spareServiceTip13')}}      
                <el-tooltip placement="top" popper-class="card-tips-tooltip" >
                  <div slot="content">
                    <template>
                      <div class="card-displaymode--item">{{$t('task.tip.spareServiceTip14')}}</div>
                      <div class="card-displaymode--item">{{$t('task.tip.spareServiceTip15')}}</div>
                    </template>
                  </div>
                  <i class="iconfont icon-question"></i>
                </el-tooltip>
              </span>
            </div>
            <el-checkbox-group v-model="cardConfig.sparePartWhere" class="setting-spare-options">
              <div class="setting-spare-checkbox">
                <el-checkbox v-model="cardConfig.checked" label="taskOutRepertoryPerson" disabled>{{$t('task.setting.taskAdditionalSetting.applyToPersonalSparePart')}}</el-checkbox>
                <p class="recommended-label">
                  <span>{{$t('task.setting.taskAdditionalSetting.recommend')}}</span>       
                  <el-tooltip placement="top" popper-class="card-display-tooltip">
                    <div slot="content">
                      <template>
                        <div class="card-displaymode--item">{{$t('task.tip.spareServiceTip16')}}</div>
                      </template>
                    </div>
                    <i class="iconfont icon-question"></i>
                </el-tooltip></p>
              </div>
              <div class="setting-spare-checkbox">
                <el-checkbox label="taskOutRepertoryDirect">{{$t('task.setting.taskAdditionalSetting.taskOutRepertoryDirect')}}</el-checkbox>
                <el-tooltip placement="top" popper-class="card-display-tooltip" >
                  <div slot="content">
                    <template>
                      <div class="card-displaymode--item">{{$t('task.tip.spareServiceTip17')}}</div>
                      <div class="card-displaymode-item">{{$t('task.tip.spareServiceTip18')}}</div>
                    </template>
                  </div>
                  <i class="iconfont icon-question algin-icon"></i>
                </el-tooltip>
              </div>
            </el-checkbox-group>

          </div>
        </div>
        <div class="setting-spare-li">
          <div class="setting-spare-title">
            <span>{{$t('task.tip.spareServiceTip19')}}</span>
            <el-switch v-model="cardConfig.isLookRepertoryRecordInfo" class="setting-spare-switch"></el-switch>    
          </div>
          <p class="setting-spare-msg">{{$t('task.tip.spareServiceTip20')}}</p>
        </div>
      </template>
    </div>
    <!-- end content-->

    <!--start 编辑列表显示字段 -->
    <editor-column-dialog 
      ref="editorColumnDialog" 
      :fields-options="fieldsOptions" 
      :edit-selected-data="fields" 
      @onSave="(value) => onSaveSetSubmit(value)">
    </editor-column-dialog>
    <!--end 编辑列表显示字段-->

    <!--start 预览 -->
    <base-modal
      :show.sync="visible"
      width="900px"
      class="preview-dialog"
      @closed="onClose('form')"
    >
      <div slot="title">
        <span class="el-dialog__title">{{$t('common.base.preview')}}</span>
      </div>
      <div class="base-modal-content">
        <img :src="settingImage1" v-if="cardConfig.inventoryType == 'sparePartInventory'">
        <img :src="settingImage2" v-else>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose">{{$t('common.base.cancel')}}</el-button>
        <el-button type="primary" @click="onClose">{{$t('common.base.makeSure')}}</el-button>
      </div>
    </base-modal>
    <!--end 预览 -->
  </div>
</template>

<script>
import taskSpareServiceView from './taskSpareServiceView';
export default taskSpareServiceView;
</script>

<style lang="scss">
@import "./taskSpareServiceView.scss";
</style>